<template>
  <div class="news-wrapper">
    <div class="form-container">
      <div class="rule_title">
        <span class="title-l"> <i class="icon_left"></i>理赔 </span>
        <el-link
          @click="handleClickClose"
          class="icon-right"
          icon="el-icon-refresh-left"
          type="primary"
        >
          返回上一页
        </el-link>
      </div>
      <div shadow="never" class="verify-card">
        <el-form
          label-position="left"
          :model="ruleForm"
          class="news-form"
          label-width="100px"
          :inline="true"
          :rules="rules"
          ref="ruleForm"
          :disabled="disable"
          :key="ruleForm.id"
        >
          <div class="range_tab">基本信息</div>
          <el-form-item label="报案订单号">
            <el-input v-model="ruleForm.waybill_no"></el-input>
          </el-form-item>
          <el-form-item label="货损时间">
            <el-date-picker
              :value="ruleForm.damage_time * 1000"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="货损地点">
            <el-input v-model="ruleForm.damage_location"></el-input>
          </el-form-item>
          <el-form-item label="货损原因">
            <el-input v-model="ruleForm.damage_reason"></el-input>
          </el-form-item>

          <el-form-item label="预估总损失额">
            <el-input v-model="ruleForm.estimated_amount"></el-input>
          </el-form-item>
          <div>
            <el-form-item label="货损经过">
              <el-input
                type="textarea"
                autosize
                v-model="ruleForm.damage_pass"
              ></el-input>
            </el-form-item>
          </div>
          <!-- <el-form-item label="承运商名称">
                        <el-input v-model="ruleForm.carrier_name"></el-input>
                    </el-form-item> -->
          <el-form-item label="货损照片">
            <UploadFile
              :images.sync="ruleForm['compensation_img']"
              :disabled="disable"
            ></UploadFile>
          </el-form-item>
          <div class="range_tab">货物受损信息</div>
          <el-table
            ref="multipleTable"
            :data="ruleForm['compensation_goods']"
            border
            stripe
            align="center"
          >
            <!-- <el-table-column type="selection" width="45"> </el-table-column> -->
            <el-table-column
              prop=""
              label="序号"
              width="50"
              type="index"
            ></el-table-column>
            <el-table-column
              prop="goods_type"
              label="货物类型"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="goods_gum"
              label="货物数量"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="goods_price"
              label="货物单价"
              width="180"
            ></el-table-column>
            <el-table-column prop="goods_img" label="货物价值证明照片">
              <template slot-scope="scope">
                <UploadLink :files.sync="scope.row.goods_img"></UploadLink>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <div class="operation-footer">
        <div class="footer-wrap">
          <el-button size="small" @click="handleClickClose">关闭</el-button>
          <template v-if="mode !== 'detail'">
            <el-button size="small" type="primary" @click="handlePreview"
              >预览</el-button
            >
            <el-button size="small" type="primary" @click="handleSubmit"
              >保存</el-button
            >
          </template>
        </div>
      </div>
    </div>
    <transition name="el-zoom-in-bottom">
      <div class="preview-article-wrap" v-if="previewDialog">
        <div class="preview-article-mask"></div>
        <div class="preview-phone-wrapper">
          <div class="preview-phone-model">
            <div class="preview-article-bar"></div>
            <div class="preview-article-article">
              <div class="preview-article-header">
                {{ ruleForm.title }}
              </div>
              <div
                class="preview-article-content"
                v-html="ruleForm.content"
              ></div>
            </div>
          </div>
        </div>
        <div class="preview-article-close" @click="previewDialog = false">
          <i style="font-size: 30px" class="el-icon-close"></i>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { CompensationDetail } from "@/api/app.js";
import { timestamp10 } from "@/utils/mUtils";
import { AdminBox } from "@/api/customer";
import { dictionanryList } from "@/page/material/common/common";
import UploadLink from "@/components/uploadFile/uploadLink.vue";
import UploadFile from "@/components/uploadFile/index.vue";

export default {
  name: "verifyEdit",
  components: { UploadFile },
  props: [],
  data() {
    return {
      ruleForm: {
        images: [],
      },
      rules: {
        serial_number: [
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
      },
      typeData: [],
      platruleForm: [
        {
          item_name: "全部",
          item_code: "0",
        },
        {
          item_name: "客户端",
          item_code: "1",
        },
        {
          item_name: "承运商端",
          item_code: "2",
        },
      ],
      mode: "add",
      id: "",
      previewDialog: false,
    };
  },
  computed: {
    disable() {
      return this.mode === "detail";
    },
  },
  mounted() {
    this.handleChangeMode();
    // console.log(this, '');
    dictionanryList(["newsType"]).then((res) => {
      this.typeData = (res.data.list["newsType"] || []).reverse();
    });
  },
  watch: {
    $route: {
      handler: function () {
        this.handleChangeMode();
      },
      immediate: true,
      deep: true,
    },
    "ruleForm.images": function (val) {
      this.$refs.imgRef1.clearValidate();
    },
  },
  methods: {
    handleClickClose() {
      this.$router.go(-1);
    },
    handlePreview() {
      this.previewDialog = true;
    },
    handleExceed(_, fileList) {
      this.$message.warning(`只能选择 ${fileList.length} 个文件上传`);
    },
    handleChangeMode() {
      this.mode = this.$route.query.mode || "add";
      this.id = this.$route.query.id;
      if (this.mode === "add") {
      } else if (this.mode === "detail" || this.mode === "edit") {
        this.getDetail();
      }
    },
    getDetail() {
      CompensationDetail({
        id: this.id * 1,
      }).then((res) => {
        const data = res.data.data;
        // data.checkout_date = data.checkout_date * 1000 || '';
        // data.effective_date = data.effective_date * 1000 || '';
        // data.verify_start_time = data.verify_start_time * 1000 || '';
        // data.verify_end_time = data.verify_end_time * 1000 || '';
        // if (data.verify_start_time) {
        //     data.verify_time = [data.verify_start_time, data.verify_end_time];
        // }
        // data.images = data.rotate_images ? [{
        //     name: data.rotate_images,
        //     url: data.rotate_images,
        // }] : [];
        this.ruleForm = data;
      });
    },
    handleSubmit() {
      // console.log(this.ruleForm, 'rrrr');
      // return;
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        const _ruleForm = {
          ...this.ruleForm,
          rotate_images:
            this.ruleForm.images.length > 0 ? this.ruleForm.images[0].url : "",
        };
        if (this.mode === "add") {
          InformationCreate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              setTimeout(() => {
                this.$router.push({
                  name: "newsList",
                });
              }, 200);
            }
          });
        } else {
          InformationUpdate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              setTimeout(() => {
                this.$router.push({
                  name: "newsList",
                });
              }, 200);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.news-wrapper {
  background: #fff;

  min-height: 100vh;
  box-sizing: border-box;

  .form-container {
    padding: 20px;
  }

  .rule_title {
    // background: red;
    display: flex;
    align-items: center;
    padding-bottom: 18px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: bold;
    justify-content: space-between;

    .title-l {
      display: flex;
      align-items: center;
    }

    .icon_left {
      display: inline-block;
      width: 6px;
      height: 16px;
      background: #f1a357;
      margin-right: 6px;
    }

    .icon-right {
    }
  }

  .range_tab {
    width: 100%;
    height: 30px;
    background: #f2f3f5;
    font-weight: bold;
    line-height: 30px;
    padding-left: 12px;
    margin-bottom: 16px;
    color: #6d6e72;
    font-size: 14px;
    box-sizing: border-box;
  }

  // min-height: 100vh;

  .news-form {
    .el-input {
      width: 200px;
    }

    .el-radio-group,
    .el-select,
    .el-cascader {
      width: 200px;
    }

    .el-textarea {
      width: 530px;
    }

    /deep/ .el-form-item {
      margin-right: 30px !important;
    }
  }

  .box-card {
    width: 450px;

    /deep/.el-card__body {
      padding: 10px;
    }
  }

  .info-card {
    border: none;
    margin-bottom: 10px;

    &.left {
      width: 60%;
    }

    &.right {
      width: 39.5%;
      margin-left: 10px;
    }
  }

  .card-wrap {
    display: flex;
    justify-content: space-around;
    min-height: 200px;

    .info-card {
      display: inline-block;
      min-height: 100%;
    }
  }

  .seal-img {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .range_tab {
    width: 100%;
    height: 30px;
    background: #f2f3f5;
    font-weight: bold;
    line-height: 30px;
    padding-left: 12px;
    margin-bottom: 16px;
    color: #6d6e72;
    font-size: 14px;
    box-sizing: border-box;
  }

  /deep/.operation-footer {
    position: fixed;
    width: calc(100% - 180px);
    bottom: 0;
    background: white;
    box-sizing: border-box;
    padding: 15px 0;
    box-shadow: 0px -10px 20px -10px rgba(0, 0, 0, 0.07);
    z-index: 100;
    left: 180px;

    .footer-wrap {
      text-align: center;
    }
  }

  /deep/.el-upload-list__item-name {
    width: 300px;
  }

  .preview-article-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;

    .preview-article-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.6;
    }

    .preview-phone-wrapper {
      width: 340px;
      height: 650px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);

      .preview-phone-model {
        background-image: url(https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/tms/1690269202318phone-wrapper-5.8.png);
        width: 309px;
        height: 668px;
        padding: 8px 10px;
        background-size: cover;
      }

      .preview-article-bar {
        height: 40px;
        border-bottom: 1px solid #e8e8e8;
      }

      .preview-article-article {
        // margin: 40px 10px;
        padding: 0 10px;
        width: 308px;
        height: 570px;
        box-sizing: border-box;
        overflow-y: scroll;

        /deep/img {
          width: 280px;
          margin: 20px 0;
        }

        .preview-article-header {
          font-size: 24px;
          font-weight: bold;
          color: rgb(51, 51, 51);
          padding: 8px 0;
        }
      }
    }

    .preview-article-close {
      position: absolute;
      top: 44px;
      right: 44px;
    }
  }
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #a8a6a6;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}
</style>